<template>
    <div class="print-box">
        <ul class="print-left-list">
            <li v-for="item of prints" :class="{'print-li-active':active === item.type}" @click="handlePrint(item.type)">
                <my-icon :type="item.icon" :style="{color:item.color}"></my-icon>
                <span class="print-text">{{item.printName}}</span>
            </li>
        </ul>
        <div class="print-middle-box">
            <component v-bind="temp" ></component>
        </div>
    </div>
</template>

<script>

import FormWordTemplateList from "@/views/modules/form/core/FormWordTemplateList";
import FormPrintLodopList from "@/views/modules/form/core/FormPrintLodopList";
import FormExcelTemplateList from "@/views/modules/form/bo/FormExcelTemplateList";
import FormPdfTemplateList from "@/views/modules/form/core/FormPdfTemplateList";

/**
 * @Author : yangsanjin
 * @Date: 2024-11-08 9:29
 */
export default {
    name: "OpenTemplate",
    props:{
        config:{}
    },
    computed:{

    },
    created(){
        this.temp = this.getTemp()
    },
    data(){
        return {
            active:'word',
            prints:[
                {type:'word',icon:'iconfile-word',printName:this.i18n('wordTemplate','Word模板'),color:'#4285f4'},
                {type:'excel',icon:'iconfile-excel',printName:this.i18n('excelTemplate', 'Excel模板'),color:'#00baad'},
                {type:'pdf',icon:'iconfile-pdf2',printName:this.i18n('pdfTemplate', 'PDF打印(模板)'),color:'#fc6060'},
                {type:'print',icon:'iconfile-text',printName:this.i18n('printTemplate', '套打模板'),color:'#4285f4'},
            ],
            temp:''
        }
    },
    methods:{
        getTemp(){
            let boDefId = '',boDefName=''
            if(!this.config){
                let {query:{id,name}} = this.$route ;
                boDefId = id ;
                boDefName = name ;
            }else {
                let {id,name} =  this.config;
                boDefId = id ;
                boDefName = name
            }
            let { active } = this;
            let appId = this.$route.query.appId ?? '';
            let modules = {
                word:{
                    is:FormWordTemplateList,
                    boDefId,
                    boDefName
                },
                excel:{
                    is:FormExcelTemplateList,
                    boDefId, boDefName, appId
                },
                pdf:{
                    is:FormPdfTemplateList,
                    boDefId,
                    allowEdit:true
                },
                print:{
                    is:FormPrintLodopList,
                    boId: boDefId,
                    boName: boDefName,
                    boDefId,
                    allowEdit: true
                }
            }
            return modules[active]
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoDef.list", key);
        },
        handlePrint(active){
            this.active = active ;
            this.temp = this.getTemp()
        }
    }
}
</script>

<style scoped>
.print-box{
    height: 100%;
    width: 100%;
    padding: 20px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0 10px;
}
.print-left-list{
    border:1px solid #e8e8e8;
    padding-top: 8px;
    margin-bottom: 0;
}
.print-left-list .print-text{
    padding-left: 6px;
    display: inline-flex;
    vertical-align: 1px;
}
.print-left-list li{
    user-select:none;
    line-height: 30px;
    margin: 6px 0;
    padding-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.print-li-active,
.print-left-list li:hover{
    background-color: #eff5ff;
    color: #1677ff;
}
.print-middle-box >>> .ant-layout-footer{
    display: none;
}
.print-middle-box >>> .content-div,
.print-middle-box >>> .rx-fit{
    padding: 0;
}
</style>